<!DOCTYPE html>
<html lang="ch">
	<head>
		<meta charset="UTF-8">
		<title>HTML5video播放插件</title>
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<!-- 1.jpg -->
		<div id="psVideo" class="psVideo">
			<video src="http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4" class="my-psVideo"
				id="my-video" poster="source/R.gif" preload="metadata">
			</video>
			<div class="psVideo-loading">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="psVideo-play-one"></div>
			<div class="psVideo-shade psVideo-shade-on">
				<div class="psVideo-play-footer">
					<div class="psVideo-progress">
						<span class="psVideo-timeBar">
							<!-- 进度条 -->
						</span>
					</div>
					<div class="psVideo-play-btn psVideo-stop"></div>
					<div class="psVideo-time">
						<span id="currentTime">00:00</span>
						<span>/</span>
						<span id="duration">00:00</span>
					</div>
					<div class="psVideo-dan">
						<input type="text" class="psVideo-dan-input" placeholder="点击输入弹幕,回车键发送" />
						<span class="psVideo-dan-btn">发送</span>
					</div>
					<div class="psVideo-right-btn">
						<div class="psVideo-btn all"></div>
						<div class="psVideo-btn loop" id="loop"></div>
						<div class="psVideo-btn set">
							<div class="set-list">
								<div class="play-speed">播放速度</div>
								<div class="play-speed-list">
									<span id="speed05Btn">0.5</span>
									<span class="moren" id="speed1Btn">1</span>
									<span id="speed2Btn">2</span>
									<span id="speed16Btn">16</span>
								</div>
							</div>
							<div class="konge1"></div>
						</div>
						<div class="psVideo-btn huazhi">自动</div>
						<div class="psVideo-btn sound" id="soundBtn">
							<div class="sound-list">
								<div class="sound-number">90</div>
								<div class="volume">
									<span class="volumeBar"></span>
								</div>
							</div>
							<div class="konge"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="player-list">
				<div class="player-list-bk">
					<div class="player-list-head">播放列表</div>
					<div class="player-list-cotent">
						<div class="player-list-box">
							<div class="player-list-video video-now">中国近代史混剪</div>
							<div class="player-list-video">big big word</div>
							<div class="player-list-video">斗破苍穹12集</div>
							<div class="player-list-video">渐渐</div>
							<div class="player-list-video">年少有为</div>
							<div class="player-list-video">爱久见人心</div>
							<div class="player-list-video">盗将行</div>
							<div class="player-list-video">Lemon</div>
							<div class="player-list-video">我的梦</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer class="footer">视频均来自网络</footer>
		<!-- <script type="text/javascript" src="javascript/index.js"></script> -->
		<script type="text/javascript">
			var video = document.getElementById("my-video");
			var loop = false;
			var qieh = 1;
			var videoIndex = 0;
			var videoProp = 0;
			var ddd = document.getElementById('video-div');
			var full = false;
			var timer;
			var hidding = false;
			var isOn = true;
			var videoListLen = $('.player-list-video').length;
			var videoSpeed = 1;
			var videoListAll = new Array('http://39.103.131.74:2000/bigFile/%E4%B8%AD%E5%9B%BD%E8%BF%91%E4%BB%A3%E5%8F%B2%E6%B7%B7%E5%89%AA.mp4',
				'http://39.103.131.74:2000/bigFile/%E5%88%87%E8%8F%9C-big%20big%20work.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%96%97%E7%A0%B4%E8%8B%8D%E7%A9%B912%E9%9B%86.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4',
				'http://39.103.131.74:2000/bigFile/%E6%9D%8E%E4%B8%80%E6%A1%90.mp4');
			var danId = 0;
			var clickFlag = null;
			var vedioError = null;

			function qiehuan() {
				video.src = videoListAll[videoIndex];
				$('.psVideo-timeBar').css('width', 0);
				video.play();
				$('.psVideo-play-btn').removeClass('psVideo-stop').addClass('psVideo-play');
				$('.psVideo-play-one').hide();
			}
			// 读取初始时间
			function timeFormat(seconds) {
				var minite = Math.floor(seconds / 60);
				if (minite < 10) {
					minite = "0" + minite;
				}
				var second = Math.floor(seconds % 60);
				if (second < 10) {
					second = "0" + second;
				}
				return minite + ":" + second;
			}
			//更新时间进度条
			function updateProgress(x) {
				if (!full || !hidding) {
					var progress = $('.psVideo-progress');
					var position = x - progress.offset().left;
					var percentage = 100 * position / progress.width();
					if (percentage > 100) {
						percentage = 100;
					}
					if (percentage < 0) {
						percentage = 0;
					}
					$('.psVideo-timeBar').css('width', percentage + '%');
					video.currentTime = video.duration * percentage / 100;
				}
			}
			// 拖拽时间进度条
			function enableProgressDrag() {
				if (!full || !hidding) {
					var progressDrag = false;
					$('.psVideo-progress').on('mousedown', function(e) {
						progressDrag = true;
						updateProgress(e.pageX);
					});
					$(document).on('mouseup', function(e) {
						if (progressDrag) {
							progressDrag = false;
							updateProgress(e.pageX);
						}
					});
					$(document).on('mousemove', function(e) {
						if (progressDrag) {
							updateProgress(e.pageX);
						}
					});
				}
			};
			// 控制栏展示消失
			function showControl(shouldShow) {
				if (shouldShow) {
					$('.psVideo-shade').removeClass('psVideo-shade-off').addClass('psVideo-shade-on');
					$('.player-list').removeClass('player-list-off').addClass('player-list-on');
				} else {
					$('.psVideo-shade').removeClass('psVideo-shade-on').addClass('psVideo-shade-off');
					$('.player-list').removeClass('player-list-on').addClass('player-list-off');
				}
			}

			function fillShow() {
				if (full) {
					if (hidding) {
						hidding = false;
					}
					if (timer) {
						clearTimeout(timer);
						timer = null;
					}
					$('.psVideo-shade').removeClass('psVideo-shade-off').addClass('psVideo-shade-on');
					$('.player-list').removeClass('player-list-off').addClass('player-list-on');
					video.attr('style', 'cursor:pointer');
					if (isOn) {
						timer = setTimeout(function() {
							hidding = true;
							$('.psVideo-shade').removeClass('psVideo-shade-on').addClass('psVideo-shade-off');
							$('.player-list').removeClass('player-list-on').addClass('player-list-off');
							video.attr('style', 'cursor:none');
						}, 2000)
					}
				}
			}
			//声音按钮
			function soundAndMute() {
				if (!full || !hidding) {
					if (video.muted) {
						video.muted = false;
						$('#soundBtn').removeClass("jinyin").addClass("sound");
						$('.volumeBar').css('height', (1 - video.volume) * 100 + '%');
						$('.sound-number').text(parseInt(video.volume * 100));
					} else {
						video.muted = true;
						$('#soundBtn').removeClass("sound").addClass("jinyin");
						$('.sound-number').text(0);
						$('.volumeBar').css({
							"height": "50px",
						})
					}
				}
			};
			//声音拖拽
			function enableSoundDrag() {
				if (!full || !hidding) {
					var volumeDrag = false;
					$('.volume').on('mousedown', function(e) {
						volumeDrag = true;
						updateVolume(e.pageY);
						video.muted = false;
						$('#soundBtn').removeClass("jinyin").addClass("sound");
					});
					$(document).on('mouseup', function(e) {
						if (volumeDrag) {
							volumeDrag = false;
							updateVolume(e.pageY);
						}
					});
					$(document).on('mousemove', function(e) {
						if (volumeDrag) {
							updateVolume(e.pageY);
						}
					});
				}
			};
			// 更新声音
			function updateVolume(y, vol) {
				if (!full || !hidding) {
					var volume = $('.volume');
					var soundTop = y - volume.offset().top;
					var percentage;
					if (vol) {
						percentage = 100 - (vol * 100);
					} else {
						var position = soundTop;
						percentage = 100 * position / 50;
					}
					if (percentage > 100) {
						$('#soundBtn').removeClass("sound").addClass("jinyin");
						percentage = 100;
					} else {
						$('#soundBtn').removeClass("jinyin").addClass("sound");
					}
					if (percentage < 0) {
						percentage = 0;
					}
					percentage = parseInt(percentage);
					$('.sound-number').text(100 - percentage);
					$('.volumeBar').css('height', percentage + '%');
					video.volume = (100 - percentage) / 100;
				}
			};
			//开始暂停
			function playAndPause() {
				if (video.paused || video.ended) {
					video.play();
					$('.psVideo-play-btn').removeClass('psVideo-stop').addClass('psVideo-play');
					$('.psVideo-play-one').hide();
					playSpeed(videoSpeed);
					$('.psVideo-dan-all').css('animation-play-state', 'running');
				} else {
					video.pause();
					$('.psVideo-play-btn').removeClass('psVideo-play').addClass('psVideo-stop');
					$('.psVideo-play-one').show();
					$('.psVideo-dan-all').css('animation-play-state', 'paused');
				}
			}
			//播放速度
			function playSpeed(speed) {
				if (!full || !hidding) {
					if (speed == 1) {
						$('#speed05Btn').removeClass("moren");
						$('#speed2Btn').removeClass("moren");
						$('#speed1Btn').addClass("moren");
						videoSpeed = 1;
					} else if (speed == 2) {
						$('#speed05Btn').removeClass("moren");
						$('#speed1Btn').removeClass("moren");
						$('#speed2Btn').addClass("moren");
						videoSpeed = 2;
					} else if (speed == 16) {
						$('#speed05Btn').removeClass("moren");
						$('#speed1Btn').removeClass("moren");
						$('#speed2Btn').addClass("moren");
						videoSpeed = 16;
					} else if (speed == 0.5) {
						$('#speed1Btn').removeClass("moren");
						$('#speed2Btn').removeClass("moren");
						$('#speed05Btn').addClass("moren");
						videoSpeed = 0.5;
					}
					video.playbackRate = speed;
				}
			}
			//循环播放
			function isloop() {
				if (!full || !hidding) {
					if (!loop) {
						$('#loop').removeClass('loop').addClass('loop-ture');
						video.loop = true;
						loop = !loop;
					} else {
						$('#loop').removeClass('loop-ture').addClass('loop');
						video.loop = false;
						loop = !loop;
					}
				}
			}

			function danOn() {
				var danText = $('.psVideo-dan-input').val();
				var zz = "^[ ]+$"; //正则判断是否全是空格
				var isK = new RegExp(zz);
				if (danText && !(isK.test(danText))) {
					var danIdNow = 'dan' + danId;
					if (full) {
						var danDom = "<span class='psVideo-dan-all psVideo-dan-value-full' id='" + danIdNow + "'</span>";
					} else {
						var danDom = "<span class='psVideo-dan-all psVideo-dan-value' id='" + danIdNow + "'</span>";
					}
					$('.psVideo').prepend(danDom);
					if (danId % 3 == 1) {
						$('#' + danIdNow).css('margin-top', '30px');
					} else if (danId % 3 == 2) {
						$('#' + danIdNow).css('margin-top', '60px');
					}
					if (video.paused || video.ended) {
						$('.psVideo-dan-all').css('animation-play-state', 'paused');
					} else {
						$('.psVideo-dan-all').css('animation-play-state', 'running');
					}
					$('.psVideo-dan-all').on('animationend', function() {
						$('#' + this.id).remove();
					});
					danId += 1;
					$('#' + danIdNow).text(danText);
					$('.psVideo-dan-input').val("");
				}

			}

			function toFull() {
				$('.psVideo').addClass('full');
				video.addClass('full');
				$('.psVideo-dan').addClass('psVideo-dan-full');
				$('.psVideo-dan-input').addClass('psVideo-dan-input-full');
				$('.psVideo-shade').addClass('psVideo-shade-full');
				timer = setTimeout(function() {
					hidding = true;
					$('.psVideo-shade').removeClass('psVideo-shade-on').addClass('psVideo-shade-off');
					$('.player-list').removeClass('player-list-on').addClass('player-list-off');
					video.attr('style', 'cursor:none');
				}, 2000)
			}

			function outFull() {
				clearTimeout(timer);
				video.removeClass('full');
				$('.psVideo').removeClass('full');
				$('.psVideo-shade').removeClass('psVideo-shade-full');
				$('.psVideo-shade').removeClass('psVideo-shade-off').addClass('psVideo-shade-on');
				$('.player-list').removeClass('player-list-off').addClass('player-list-on');
				video.attr('style', 'cursor:pointer');
				$('.psVideo-dan').removeClass('psVideo-dan-full');
				$('.psVideo-dan-input').removeClass('psVideo-dan-input-full');
			}
			//全屏
			function doOnClick() {
				if (clickFlag) {
					clickFlag = clearTimeout(clickFlag);
				}
				clickFlag = setTimeout(function() {
					playAndPause();
				}, 300);
			}

			function doOnDblClick() {
				if (clickFlag) {
					clickFlag = clearTimeout(clickFlag);
				}
				launchFullScreen();
			}

			function keyTime(key) {
				if (key == 39) {
					var keyCurrentTime = video.currentTime + 10;
					var keyDuration = video.duration;
					var keyPercent = 100 * keyCurrentTime / keyDuration;
					$('.psVideo-timeBar').css('width', keyPercent + '%');
					$('#currentTime').text(timeFormat(keyCurrentTime));
					video.currentTime = keyCurrentTime;
				}
				if (key == 37) {
					console.log(video.currentTime);
					var keyCurrentTime = video.currentTime - 10;
					console.log(keyCurrentTime);
					var keyDuration = video.duration;
					var keyPercent = 100 * keyCurrentTime / keyDuration;
					$('.psVideo-timeBar').css('width', keyPercent + '%');
					$('#currentTime').text(timeFormat(keyCurrentTime));
					video.currentTime = keyCurrentTime;
				}
			}
			//全屏
			function launchFullScreen() {
				if (!full || !hidding) {
					var element = document.documentElement;
					if (!full) {
						if (element.requestFullScreen) {
							element.requestFullScreen();
						} else if (element.mozRequestFullScreen) {
							element.mozRequestFullScreen();
						} else if (element.webkitRequestFullScreen) {
							element.webkitRequestFullScreen();
						} else if (element.msRequestFullscreen) {
							element.msRequestFullscreen();
						}
					} else {
						if (document.exitFullscreen) {
							document.exitFullscreen();
						} else if (document.msExitFullscreen) {
							document.msExitFullscreen();
						} else if (document.mozCancelFullScreen) {
							document.mozCancelFullScreen();
						} else if (document.webkitCancelFullScreen) {
							document.webkitCancelFullScreen();
						}
					}
				}
			}
			//监听退出全屏事件
			document.addEventListener("fullscreenchange", function(e) {
				if (!full) {
					toFull();
				} else {
					outFull();
				}
				full = !full;
			});
			document.addEventListener("mozfullscreenchange", function(e) {
				if (!full) {
					toFull();
				} else {
					outFull();
				}
				full = !full;
			});
			document.addEventListener("webkitfullscreenchange", function(e) {
				if (!full) {
					toFull();
				} else {
					outFull();
				}
				full = !full;
			});
			document.addEventListener("MSFullscreenChange", function(e) {
				if (!full) {
					toFull();
				} else {
					outFull();
				}
				full = !full;
			});

			updateVolume(0, 0.9); // 初始化声音
			video.onloadedmetadata = function() {
				$('#currentTime').text(timeFormat(0));
				$('#duration').text(timeFormat(video.duration));
				enableProgressDrag();
				enableSoundDrag();
				playSpeed(videoSpeed);
			};
			video.ontimeupdate = function() {
				var currentTime = video.currentTime;
				var duration = video.duration;
				var percent = 100 * currentTime / duration;
				$('.psVideo-timeBar').css('width', percent + '%');
				$('#currentTime').text(timeFormat(currentTime));
			};
			video.oncanplay = function() {
				$('.psVideo-loading').fadeOut(100);
			};
			video.onwaiting = function() {
				$('.psVideo-loading').fadeIn(100);
			};
			video.onended = function() {
				if (!loop) {
					videoIndex += 1;
				}
				if (videoIndex == videoListLen) {
					videoIndex = 0;
				}
				for (var i = 0; i < videoListLen; i++) {
					$('.player-list-video').eq(i).removeClass('video-now');
				}
				$('.player-list-video').eq(videoIndex).addClass('video-now');
				qiehuan();

			};

			$('.psVideo').hover(function() {
				showControl(true);
			}, function() {
				showControl(false);
			});
			// 判断鼠标是否在控制区，进入和出去改变isOn值，来触发是否开启延时函数 video.on
			$('.psVideo-shade').hover(function() {
				isOn = false;
			}, function() {
				isOn = true;
			});
			$('.player-list').hover(function() {
				isOn = false;
			}, function() {
				isOn = true;
			});
			$('body').on('mousemove', function() {
				fillShow();
			});
			$('.psVideo-play-one').on('click', function() {
				playAndPause();
			});
			$('.psVideo-play-btn').on('click', function() {
				if (!full || !hidding) {
					playAndPause();
				}
			});
			$('.all').on('click', launchFullScreen);
			$('#currentTime').text(timeFormat(0));
			$('#duration').text(timeFormat(video.duration));
			enableProgressDrag();
			enableSoundDrag();
			playSpeed(videoSpeed);
			$('#speed1Btn').on('click', function() {
				playSpeed(1);
			});
			$('#speed2Btn').on('click', function() {
				playSpeed(2);
			});
			$('#speed05Btn').on('click', function() {
				playSpeed(0.5);
			});
			$('#speed16Btn').on('click', function() {
				playSpeed(16);
			});
			//  阻止事件冒泡
			$('.sound-list').bind("click", function(event) {
				event.stopPropagation();
			});
			$('.konge').bind("click", function(event) {
				event.stopPropagation();
			});
			$('#soundBtn').on('click', soundAndMute);
			$('#loop').on('click', isloop);
			video.onclick = function() {
				doOnClick();
			};
			video.ondblclick = function() {
				doOnDblClick();
			};
			$('.psVideo-dan-btn').on('click', function() {
				danOn();
			});
			$(window).keypress(function(e) {
				var isFocus = $(".psVideo-dan-input").is(":focus");
				var isControl = $('.psVideo-shade').hasClass('psVideo-shade-off');
				if (e.keyCode == 0 || e.keyCode == 32) {
					if (!isFocus || isControl) {
						playAndPause();
					}
				}
				if (e.keyCode == 13) {
					if (isFocus) {
						danOn();
					}
				}
			});
			$(window).keydown(function(e) {
				keyTime(e.keyCode);
			});
			$('.player-list-video').on('click', function() {
				if (!full || !hidding) {
					videoIndex = $(this).index();
					for (var i = 0; i < videoListLen; i++) {
						$('.player-list-video').eq(i).removeClass('video-now');
					}
					$(this).addClass('video-now');
					qiehuan();
				}
			});
		</script>
	</body>
</html>
